{% extends './base.html' %}
{% block title %}随说{% endblock %}
{% block header %}
    <style>
        .label a {
            cursor: pointer;
        }
    </style>
{% endblock %}
{% block footer %}
    <script>
        $(function () {
            const main_list = $('#main-list')
            const more_btn = $('.more-btn')
            var params = {
                page: 1,
            }
            getTalkApi()

            // 获取文章
            function getTalkApi() {
                $ajax.get({
                    url: '/v1/api/talks/',
                    data: params,
                    success: function (res) {
                        if (res.code === 200) {
                            if (res.data) {
                                var html = template('main-item', {"posts": res.data})
                                main_list.append(html)
                            } else {
                                more_btn.parents('.more').hide()
                            }
                        }
                    }
                })
            }

            // more
            more_btn.click(function () {
                params['page']++
                getTalkApi()
            })
            // category
            $('#mood-list li').click(function () {
                params['page'] = 1
                params['mood'] = $(this).attr('data-pk')
                main_list.empty()
                more_btn.parents('.more').show()
                getTalkApi()
            })

        })
    </script>
{% endblock %}
{% block utils %}
    {% verbatim %}
    <script type="text/html" id="main-item">
        {{ each posts post }}
        <div class="col-md-4 bgc mb-2">
            <div class="card mb-2 box-shadow mt-2">
                <div class="showimg">
                    <img class="card-img-top" style="width: 100%; display: block;" src="http://127.0.0.1:8000/media/VYizqEJvCngLuDcj2sRCmA.jpg"
                         data-holder-rendered="true">
                </div>

                <div class="card-body">
                    <a href="/talk/{{ post.id }}/">{{post.content}}</a>
                    <div class="d-flex justify-content-between align-items-center">
                        <div class="btn-group showtitle">
                            <i class="iconfont icon-time"></i>2019-04-03
                        </div>
                        <small class="text-muted">9 mins</small>
                    </div>
                </div>
            </div>
        </div>
        {{ /each }}
    </script>
    {% endverbatim %}
{% endblock %}
{% block main %}
    <!-- category -->
    <div class="row bgc mt-2">
        <div class="new new-right">
            <span><i class="iconfont icon-tag"></i>心情</span>
            <small>Category</small>
        </div>
        <div class="col-md-12">
            <ul class="label" id="mood-list">
                {% for mood in moods %}
                    <li data-pk="{{ mood.id }}">
                        <a title="{{ mood.name }}">{{ mood.name }}&nbsp;&nbsp;({{ mood.post_num }})</a>
                    </li>
                {% endfor %}
            </ul>
        </div>
    </div>
    <!-- articles -->
    <div class="row mt-2 wow fadeInDown">
        <div class="col-md-12 bgc">
            <div class="new">
                <span><i class="iconfont icon-090sun"></i></span>
                <span>最新随说</span>
                <small>New Article</small>
            </div>
        </div>

        <div class="container mt-2">
            <div class="row" id="main-list">

            </div>
        </div>
    </div>
    <!-- more -->
    <div
            class="row mt-2 mb-2 wow fadeInDown more"
            style="visibility: visible;"
    >
        <div class="col-md-12 bgc">
            <button class="more more-btn">
                <span><i class="iconfont icon-refresh"></i></span>
                <span>更多</span>
                <span><i class="iconfont icon-refresh"></i></span>
            </button>
        </div>
    </div>
{% endblock %}